<template>
	<view class="app_Cont">
		<view class="showCont" v-if="showCont">
			<view class="headCont">
				<view class="userCont">
					<view class="userImg" @click="editInfo">
						<image :src="userInfo.user.head_img"></image>
					</view>
					<view class="userInfo">
						<view class="userName">
							<view class="userNameText" @click="editInfo">{{userInfo.user.nick_name}}</view>
							<view class="suerStatus" v-if="userInfo.user.is_ws_jl==2" @click="showStatus = true">
								<view>{{userInfo.user.user_zz_status?userInfo.user.user_zz_status:'未选择'}}</view>
								<view class="iconfont icon-xiala"></view>
							</view>
						</view>
						<view class="userDes" v-if="userInfo.user.jl_notes_number">
							<view class="">海员ID：{{userInfo.user.jl_notes_number}}</view>
							<view class="iconfont icon-fuzhi" v-if="userInfo.user.jl_notes_number" @click="copyText"></view>
						</view>
					</view>
					<view class="editIcon iconfont icon-saoyisao" @click="codeFn"></view>
				</view>
				<view class="changeCont">
					<view class="changeHead">
						<view>今日美元/人民币汇率({{userInfo.jrhl.date}})</view>
						<view class="iconfont icon-jisuanqi" @click="showComput = true"></view>
					</view>
					<view class="changeItem">
						<view class="changeValue">{{userInfo.jrhl.usdToCny}} </view>
					</view>
				</view>
				
				<view class="editBook" v-if="userInfo.user.is_ws_jl==1">
					<view class="iconfont icon-jianli1"></view>
					<view class="editTip">
						<view class="tipHead">我的简历</view>
						<view class="tipText">完善您的简历，让梦想起航！</view>
					</view>
					<view class="editBtn" @click="editFn">立即编辑</view>
				</view>
				<view class="editBook noFlex" v-if="userInfo.user.is_ws_jl==2">
					<view class="bookHead">
						<view class="bookHeadLeft">
							<view class="iconfont icon-chuanyuanzhaopin"></view>
							<view class="bookName">{{userInfo.user_biographical_notes.zw}}</view>
							<view class="redText endBookText" v-if="userInfo.user.daoqi_zs.length>0">
								<text class="iconfont icon-jinggao-L"></text>
								<text>证书已到期({{userInfo.user.daoqi_zs.length}}个)</text>
							</view>
							<view class="redText endBookText" v-if="userInfo.user.daoqi_zs.length==0&&userInfo.user.jjdaoqi_zs.length>0">
								<text class="iconfont icon-jinggao-L"></text>
								<text>证书即将到期({{userInfo.user.jjdaoqi_zs.length}}个)</text>
							</view>
						</view>
						<view class="editCont" @click="editFn" v-if="false">
							<view class="editIcon iconfont icon-bianji" ></view>
							<view>我的简历</view>
						</view>
					</view>
					<view class="bookTags">
						<view class="bookTagsItem">{{userInfo.user_biographical_notes.zs}}</view>
						<view class="bookTagsItem">{{userInfo.user_biographical_notes.cblx}}</view>
						<view class="bookTagsItem">{{userInfo.user_biographical_notes.hxyq}}</view>
						<view class="bookTagsItem overText">{{userInfo.user_biographical_notes.jg}}</view>
					</view>
					<view class="bookUnder">
						<view class="bookItem">
							<view class="itemDes">
								<view class="iconfont icon-purseS-fill"></view>
								<view>${{userInfo.user_biographical_notes.qwyx}}</view>
							</view>
							<view class="itemDes">
								<view class="iconfont icon-xueli"></view>
								<view>{{userInfo.user_biographical_notes.xl}}</view>
							</view>
							<view class="itemDes noRight">
								<view class="iconfont icon-gongzuojingyan"></view>
								<view>{{userInfo.user_biographical_notes.gzjy}}年</view>
							</view>
						</view>
						<view class="refBtn" v-if="false">
							<text class="iconfont icon-shuaxin"></text>
							<text >简历曝光</text>
						</view>
					</view>
					<view class="bookCtrl">
						<view class="ctrlItem" @click="editFn">
							<text class="iconfont icon-bianjiedit"></text>
							<text >编辑简历</text>
						</view>
						<view class="ctrlItem" @click="freshFn">
							<text class="iconfont icon-shuaxin"></text>
							<text >曝光简历</text>
						</view>
						<view class="ctrlItem" @click="handleShare">
							<text class="iconfont icon-zcpt-peixunbaomingguanli"></text>
							<text >简历主页</text>
						</view>
					</view>
				</view>
			</view>
			<view class="cardCont">
				<view class="cardHead">
					<view class="cardShu"></view>
					<view class="cardName">常用功能</view>
				</view>
				<view class="cardUnder">
					<view class="cardItem" @click="navFn(4)">
						<view class="cardNum iconfont icon-V"></view>
						<view class="cardName">岗位收藏</view>
					</view>
					<view class="cardItem" @click="navFn(1)">
						<view class="cardNum iconfont icon-zcpt-peixunbaomingguanli"></view>
						<view class="cardName">岗位投递</view>
					</view>
					<view class="cardItem" v-if="false" @click="navFn(2)">
						<view class="cardNum iconfont icon-tijian"></view>
						<view class="cardName">培训报名</view>
					</view>
					<view class="cardItem" v-if="false" @click="navFn(3)">
						<view class="cardNum iconfont icon-order"></view>
						<view class="cardName">办证记录</view>
					</view>
					<view class="cardItem" @click="navFn(5)">
						<view class="cardNum iconfont icon-xiaofeijilu1"></view>
						<view class="cardName">消费记录</view>
					</view>
					<view class="cardItem" @click="navFn(6)">
						<view class="cardNum iconfont icon-yijianfankui"></view>
						<view class="cardName">意见反馈</view>
					</view>
					<view class="cardItem" @click="navFn(7)">
						<view class="cardNum iconfont icon-kefu"></view>
						<view class="cardName">联系客服</view>
					</view>
					<view class="cardItem" v-if="userInfo.user&&userInfo.user.is_crew_enterprise==0" @click="navFn(8)">
						<view class="cardNum iconfont icon-qiyerenzheng"></view>
						<view class="cardName">绑定企业</view>
					</view>
				</view>
			</view>
			<view class="cardCont">
				<view class="cardHead">
					<view class="cardShu"></view>
					<view class="cardName">分享有奖</view>
				</view>
				<view class="cardUnder">
					<view class="cardItem" @click="pointsFn(1)">
						<view class="cardNum iconfont icon-jifen1"></view>
						<view class="cardName">积分商城</view>
					</view>
					<view class="cardItem" @click="pointsFn(2)">
						<view class="cardNum iconfont icon-xianjin"></view>
						<view class="cardName">赚现金</view>
					</view>
				</view>
			</view>
			<view class="cardCont" v-if="userInfo.user&&userInfo.user.is_crew_enterprise==1">
				<view class="cardHead">
					<view class="cardShu"></view>
					<view class="cardName">企业中心</view>
				</view>
				<view class="cardUnder">
					<view class="cardItem" @click="toComCenter(1)">
						<view class="cardNum iconfont icon-gangweiguanli"></view>
						<view class="cardName">发布岗位</view>
					</view>
					<view class="cardItem" @click="toComCenter(2)">
						<view class="cardNum iconfont icon-yitoudi"></view>
						<view class="cardName">收到投递</view>
					</view>
				</view>
			</view>
			<view class="listCont">
				<view :class="index==0?'noTop listItem':'listItem'" @click="listFn(item)" :key="index" v-for="(item,index) in listArr">
					<view :class="'iconfont '+ item.icon"></view>
					<view class="listItemName">{{item.name}}</view>
					<view class="iconfont icon-jiantou2"></view>
				</view>
			</view>
			<view class="copyTip">备案号：苏ICP备2024125326号-1</view>
		</view>
		<u-popup :show="showTalk" @close="showTalk = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
			<view class="maskCont">
				<div class="maskTitle">联系我们</div>
				<div class="talkImg">
				  <img :src="talkInfo.wxewm" />
				</div>
				<div class="maskDes textCenter">添加客服微信二维码</div>
				<div class="maskDes flexCont bigFont">
				  <div class="iconfont icon-24gl-phoneLoudspeaker"></div>
				  <div>{{talkInfo.kfrx}}</div>
				</div>
				<div class="maskDes textCenter">欢迎致电，我们将为您提供帮助！</div>
				<div @click="telFn" class="copyBtn">立即拨号</div>
			</view>
		</u-popup>
		<tabBar></tabBar>
		<u-popup :show="showComput" @close="showComput = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
			<view class="formCont">
				<view class="formHead">汇率计算器</view>
				<view class="formMoney"><text class="moneyText">{{computMoney}}</text>(元)</view>
				<view class="formItem">
					<view class="inputValue">
						<input maxlength="11" style="text-align: center;" type="number"  v-model="hlMoney" placeholder="请输入美元($)"  />
					</view>
					<text>美元</text>
				</view>
				<view class="sureBtn" @click="computMoneyFn">查看汇算结果</view>
			</view>
		</u-popup>
		<u-popup :show="showAdd" @close="showAdd = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
			<view class="formCont">
				<view class="formHead">绑定校园账号</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="mustIcon">*</view>
					    <view class="inputNameText">手机号</view>
				    </view>
					<view class="inputValue">
						<input maxlength="11"  type="number" v-model="bindMoble" placeholder="请输入手机号"  />
					</view>
					<view v-if="checkPhone(bindMoble)" class="iconfont icon-gouxuan1"></view>
				</view>
				<view class="sureBtn" @click="sureReport">确认绑定</view>
			</view>
		</u-popup>
		<u-popup :show="showBindShare" @close="showBindShare = false" :closeOnClickOverlay="true" :safeAreaInsetBottom="false" mode="bottom" :round="10">
			<view class="formCont">
				<view class="formHead">申请推广员，免费赚佣金</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="mustIcon">*</view>
					    <view class="inputNameText">姓名</view>
				    </view>
					<view class="inputValue">
						<input v-model="shareData.tgy_name" placeholder="请输入姓名"  />
					</view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="mustIcon">*</view>
					    <view class="inputNameText">手机号</view>
				    </view>
					<view class="inputValue">
						<input maxlength="11"  type="number" v-model="shareData.tgy_mobile" placeholder="请输入手机号"  />
					</view>
					<view v-if="checkPhone(shareData.tgy_mobile)" class="iconfont icon-gouxuan1"></view>
				</view>
				<view class="formItem">
					<view class="inputName">
					    <view class="mustIcon">*</view>
					    <view class="inputNameText">学校/企业</view>
				    </view>
					<view class="inputValue">
						<input v-model="shareData.tgy_school_enterprise" placeholder="请输入学校/企业名称"  />
					</view>
				</view>
				<view class="sureBtn" @click="sureBindShare">免费申请资格</view>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
		<load v-if="!showCont"></load>
		<u-notify ref="uNotify"></u-notify>
		<subLoad v-if="showSub"></subLoad>
		<u-modal :confirmText="sureText" :show="showModal" title="操作提示" @confirm="modalSure"  :content='modalCont'></u-modal>
		<u-picker :show="showStatus" @confirm="statusSureFn" @cancel="showStatus = false" @close="showStatus = false" :closeOnClickOverlay="true" :columns="statusArr"></u-picker>
	</view>
</template>

<script>
	import tabBar from '@/components/tabBar.vue'
	import load from '@/components/load.vue'
	import subLoad from '@/components/sub.vue'
	import api from '@/http/api.js'
	import getCate from '@/utils/getCate.js'
	import ruleCheck from '@/utils/ruleCheck.js'
	export default {
		components:{tabBar,load,subLoad},
		data() {
			return {
				showSub:false,
				showCont:false,
				showAdd:false,
				showBindShare:false,
				showModal:false,
				showComput:false,
				modalType:1,//1为学校未绑定，2为简历未完善,3.为申请推广员
				hlMoney:'',
				computMoney:'0.00',
				modalCont:'',
				sureText:'我知道了',
				userInfo:{},
				talkInfo:{},
				listArr:[
					{name:'关于我们',url:'about/about',icon:'icon-guanyu'},
					{name:'合作申请',url:'joinUs/joinUs',icon:'icon-hezuo1'},
					{name:'平台协议',url:'link/link',icon:'icon-xieyixiangqing'},
					// {name:'学校绑定（学校入口）',url:'bindSchool/bindSchool',icon:'icon-xuexiao-01'},
				],
				showTalk:false,
				showStatus:false,
				statusArr:[],
				bindMoble:'',
				shareData:{
					tgy_name:'',
					tgy_mobile:'',
					tgy_school_enterprise:'',
				},
			};
		},
		async onShow() {
			let _statusArr= await getCate.getCateFn(6)
			this.statusArr = [_statusArr.map((item)=>item.name)]
			await this.getData()
		},
		methods:{
			handleShare() {
			  uni.navigateTo({
			  	url: '../boot/bootDetail/bootDetail?type=1&id='+this.userInfo.user.biographical_notes_id
			  });
			},
			toComCenter(id){
				uni.navigateTo({
					url: '../boot/comCenter/comCenter?navId='+id
				});
			},
			computMoneyFn(){
				if(this.hlMoney==''){
					this.computMoney = '0.00'
				}else{
					this.computMoney = (Number(this.hlMoney)*this.userInfo.jrhl.hl).toFixed(2)
				}
			},
			copyText() {
			  uni.setClipboardData({
				data: this.userInfo.user.jl_notes_number,
				success: () => {
				  uni.showToast({
					title: '复制成功',
					icon: 'success'
				  });
				},
				fail: () => {
				  uni.showToast({
					title: '复制失败',
					icon: 'none'
				  });
				}
			  });
			},
			telFn(){
				uni.makePhoneCall({
					phoneNumber:this.talkInfo.kfrx,
				})
			},
			freshFn(){
				let data = {}
				api.getRequst(data,'/api/My/saveActive').then((res)=>{
					if(res.code==1){
						this.$refs.uToast.show({
							message:'曝光成功,简历已靠前～',
						})
					}
				})
			},
			codeFn(){
				wx.scanCode({
				  success:(res)=> {
					// 扫码成功，获取结果
					
					let result = JSON.parse(res.result)
					
					if(result&&result.type==1){
						if(this.userInfo.user.is_ws_jl==1){
							this.sureText = '立即完善'
							this.showModal = true
							this.modalCont = '简历未完善，请先完善在线简历之后再扫码录入。'
							this.modalType = 2
						}else{
							this.enterComFn(result)
						}
					}
					// res.result 即为扫码得到的结果
				  },
				  fail(err) {
					// 扫码失败处理
					console.log('scan code fail', err);
				  }
				})
			},
			enterComFn(data){
				this.showSub=  true
				api.getRequst(data,'/api/My/qrCodeBind').then((res)=>{
					if(res.code==1){
						this.$refs.uToast.show({
							message:'简历已成功录入企业人才库',
						})
					}
					this.showSub = false
				})
			},
			modalSure(){
				if(this.modalType==2){
					this.editFn()
				}else if(this.modalType==1){
					
				}
				this.showModal = false
			},
			checkPhone(mobile){
				return !ruleCheck.checkPhone(mobile)
			},
			sureBindShare(){
				if(ruleCheck.checkPhone(this.shareData.tgy_mobile)){
					let tipData = {
						bgColor: '#e47470',
						message: '',
						safeAreaInsetTop:true,
					}
					tipData.message = ruleCheck.checkPhone(this.shareData.tgy_mobile)
					this.$refs.uNotify.show(tipData)
					return false
				}
				let data = this.shareData
				api.getRequst(data,'/api/My/applyPromotion').then((res)=>{
					if(res.code==1){
						this.sureText = '关闭弹窗'
						this.showModal = true
						this.modalCont = '申请成功，等待管理员审核通过即可进入佣金任务大厅'
						this.modalType = 3
						this.showBindShare =false
					}
					this.showSub = false
				})
			},
			sureReport(){
				if(ruleCheck.checkPhone(this.bindMoble)){
					let tipData = {
						bgColor: '#e47470',
						message: '',
						safeAreaInsetTop:true,
					}
					tipData.message = ruleCheck.checkPhone(this.bindMoble)
					this.$refs.uNotify.show(tipData)
					return false
				}
				let data = {
					mobile:this.bindMoble
				}
				api.getRequst(data,'/api/School/bindSchool').then((res)=>{
					if(res.code==1){
						uni.navigateTo({
							url: 'bindSchool/bindSchool'
						});
					}else{
						this.sureText = '我知道了'
						this.showModal = true
						this.modalCont = '学校未关联此手机号，绑定失败。'
						this.modalType = 1
						this.showAdd =false
					}
					this.showSub = false
				})
			},
			statusSureFn(data){
				this.showSub=  true
				this.showStatus = false
				api.getRequst({user_zz_status:data.value[0]},'/api/My/editStatus').then((res)=>{
					if(res.code==1){
						this.$refs.uToast.show({
							message:'状态更改成功',
						})
						this.getData()
					}
					this.showSub = false
				})
			},
			editInfo(){
				uni.navigateTo({
					url: 'editUser/editUser'
				});
			},
			editFn(){
				uni.navigateTo({
					url: 'book/book'
				});
			},
			pointsFn(id){
				let url = ''
				if(id==1){
					url = 'points/points'
					uni.navigateTo({
						url: url
					});
				}else if(id==2){
					if(this.userInfo.tgy.status==2){
						uni.navigateTo({
							url: 'trainShare/trainShare'
						});
					}else if(this.userInfo.tgy.status==1){
						this.sureText = '关闭弹窗'
						this.showModal = true
						this.modalCont = '您的申请正在审核，请耐心等待'
						this.modalType = 4
						this.showBindShare =false
					} else{
						this.showBindShare = true
					}
					
				}
				
			},
			listFn(item){
				if(item.url&&item.name!='学校绑定（学校入口）'&&item.name!='做任务赚现金'){
					uni.navigateTo({
						url: item.url
					});
				}else if(item.name=='学校绑定（学校入口）'){
					if(this.userInfo.user.is_bind_school==2){
						uni.navigateTo({
							url: item.url
						});
					}else{
						this.showAdd = true
					}
				}
			},
			navFn(type){
				if(type==1){
					uni.navigateTo({
						url: 'signWork/signWork'
					});
				}else if(type==2){
					uni.navigateTo({
						url: 'signTrain/signTrain'
					});
				}else if(type==3){
					uni.navigateTo({
						url: 'obtainRecord/obtainRecord'
					});
				}else if(type==4){
					uni.navigateTo({
						url: 'saveWork/saveWork'
					});
				}else if(type==5){
					uni.navigateTo({
						url: 'record/record'
					});
				}else if(type==6){
					uni.navigateTo({
						url: 'idea/idea'
					});
				}else if(type==7){
					this.showTalk = true
				}else if(type==8){
					uni.navigateTo({
						url: '../boot/vip/signCom/signCom'
					});
				}
			},
			getData(){
				api.getRequst({},'/api/My').then((res)=>{
					if(res.code==1){
						this.userInfo = res.data
						this.getTalk()
					}
					this.showCont = true
				})
			},
			getTalk(){
				api.getRequst({},'/api/My/contactService').then((res)=>{
					if(res.code==1){
						this.talkInfo = res.data
					}
				})
			}
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '鲸领航系统分享',
				imageUrl: 'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
			}
		},
		onShareTimeline(res) {//分享到朋友圈
			return {
				title: '鲸领航系统分享',
				imageUrl: 'https://whalenav.oss-cn-chengdu.aliyuncs.com/uploads/images/20241211/bde6c10f267dca4630622686023ae395bf821eba.jpg',
			}
		},
	}
</script>

<style lang="less">
	.showCont{
		min-height: 100vh;
		padding-bottom:140rpx;
		box-sizing: border-box;
	}
.headCont{
	padding: 170rpx 4% 60rpx;
	box-sizing: border-box;
	background-image: linear-gradient(to bottom right,#a4c0fe,#3f55cc);
	.userCont{
		display: flex;
		align-items: center;
		.userImg{
			background-color: #fff;
			border-radius: 50%;
			font-size: 0;
			width: 120rpx;
			height: 120rpx;
			margin-right: 30rpx;
			overflow: hidden;
			padding: 5rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.userInfo{
			flex: 1;
			color: #fff;
			.userName{
				display: flex;
				align-items: center;
				.userNameText{
					font-size: 36rpx;
					font-weight: bold;
				}
				.iconfont{
					color: #fff;
				}
			}
			.userDes{
				display: flex;
				align-items: center;
				margin-top: 15rpx;
				.iconfont{
					margin-left: 15rpx;
				}
			}
			.suerStatus{
				padding: 10rpx 20rpx;
				background-color: #fff;
				color: #3f55cc;
				font-size: 24rpx;
				margin-left: 15rpx;
				display: flex;
				border-radius: 50rpx;
				align-items: center;
				.iconfont{
					position: relative;
					top: 4rpx;
					color: #3f55cc;
				}
			}
		}
		
		.editIcon{
			color: #fff;
			font-size: 44rpx;
		}
	}
	.changeCont{
		width: 100%;
		margin: 30rpx auto;
		background-color: rgba(0, 0, 0, 0.1);
		padding:40rpx;
		border-radius: 10rpx;
		color: #fff;
		box-sizing: border-box;
		.changeHead{
			font-size: 30rpx;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			.iconfont{
				font-size: 36rpx;
			}
		}
		.changeItem{
			display: flex;
			align-items: center;
			// justify-content: center;
			margin-top: 30rpx;
			font-size: 40rpx;
			.cahngeLine{
				margin: 0 30rpx;
			}
		}
	}
	
	.editBook{
		display:flex;
		align-items: center;
		justify-content: space-between;
		background-image: linear-gradient(to right,#5a77f2,#698ff8);
		width: 100%;
		margin-top: 30rpx;
		padding:30rpx 30rpx;
		box-sizing: border-box;
		color: #fff;
		border-radius: 10rpx;
		.editTip{
			flex: 1;
			width: 100rpx;
			margin-left: 30rpx;
			.tipHead{
				font-size:30rpx;
				font-weight: bold;
				.redText{
					// color: #ff5757;
				}
			}
			.tipText{
				font-size: 24rpx;
				margin-top: 6rpx;
			}
		}
		.editBtn{
			padding: 15rpx 40rpx;
			border: 1px solid #fff;
			color: #fff;
			font-size: 24rpx;
			border-radius: 8rpx;
		}
		.iconfont{
			font-size: 70rpx;
		}
	}
	.noFlex{
		display: block;
		
		.bookHead{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.bookHeadLeft{
				display: flex;
				align-items: center;
				.iconfont{
					font-size: 50rpx;
				}
				.bookName{
					font-size: 30rpx;
					font-weight: bold;
					margin: 0 10rpx;
				}
				.endBookText{
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					.iconfont{
						margin-right: 10rpx;
						font-size: 30rpx;
						position: relative;
					}
				}
			}
			.editCont{
				display: flex;
				align-items: center;
				.editIcon{
					margin-right: 10rpx;
					font-size: 30rpx;
				}
			}
		}
		.bookTags{
			display: flex;
			place-items: center;
			margin: 24rpx 0 30rpx;
			.bookTagsItem{
				background-color: rgba(0, 0, 0, 0.2);
				color: #fff;
				font-size: 20rpx;
				padding: 8rpx 15rpx;
				box-sizing: border-box;
				margin-right: 25rpx;
				border-radius: 5rpx;
			}
			.overText{
				max-width: 250rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
			}
		}
		.bookUnder{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.bookItem{
				display: flex;
				align-items: center;
				
				.itemDes{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					border-right: 1px solid #fff;
					padding-right: 25rpx;
					margin-right: 25rpx;
					line-height: 20rpx;
					.iconfont{
						font-size: 24rpx;
						margin-right: 8rpx;
					}
				}
				.noRight{
					border-right: none;
				}
			}
			
			.refBtn{
				color: #fff;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				.iconfont{
					font-size: 30rpx;
					margin-right: 10rpx;
				}
			}
		}
		.bookCtrl{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 30rpx;
			margin-top: 30rpx;
			border-top: 1px dashed #fff;
			.ctrlItem{
				margin-left: 15rpx;
				display: flex;
				align-items: center;
				.iconfont{
					font-size: 28rpx;
					margin-right: 10rpx;
				}
			}
		}
	}
}
.cardCont{
	width: 92%;
	padding: 30rpx 30rpx 40rpx;
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 10rpx;
	margin: 30rpx auto;
	.cardHead{
		display: flex;
		
		.cardShu{
			background-color: #5a77f2;
			width: 10rpx;
			height: 40rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}
		.cardName{
			font-weight: bold;
			font-size: 30rpx;
		}
	}
	.cardUnder{
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		.cardItem{
			width: 25%;
			text-align: center;
			color: #333;
			font-size: 28rpx;
			margin-top: 40rpx;
			.iconfont{
				font-size: 60rpx;
				margin-bottom: 15rpx;
				color: #3f55cc;
			}
			
		}
	}
	
}

.listCont{
	width: 92%;
	margin: 30rpx auto;
	background-color: #fff;
	padding:0 30rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	.listItem{
		padding: 30rpx 0;
		border-top: 1px dashed #ddd;
		display: flex;
		align-items: center;
		.iconfont{
			font-size: 40rpx;
			color: black;
		}
		.listItemName{
			font-size: 28rpx;
			margin: 0 20rpx;
			flex: 1;
			width: 50rpx;
		}
		.icon-jiantou2{
			font-size: 30rpx;
		}
	}
	.noTop{
		border-top: none;
	}
}
.copyTip{
	font-size: 24rpx;
	color: #999;
	text-align: center;
	margin-top: 30rpx;
}
.maskCont{
	padding: 40rpx 4%;
	box-sizing: border-box;
	.maskTitle {
	  text-align: center;
	  font-size: 32rpx;
	  font-weight: bold;
	}
	.talkImg {
	  margin: 30rpx auto;
	  width: 240rpx;
	  height: 240rpx;
	  img {
		width: 100%;
		height: 100%;
	  }
	}
	.maskDes{
		font-size: 24rpx;
		text-align: center;
		margin: 30rpx 0;
	}
	.flexCont{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.bigFont{
		font-size: 40rpx;
		font-weight: bold;
		.iconfont{
			margin-right: 15rpx;
		}
	}
	.copyBtn {
	  background-image: linear-gradient(to right bottom,#a3bffe,#3f55cc);
	  width: 100%;
	  margin-top: 40rpx;
	  text-align: center;
	  padding: 26rpx 0;
	  border-radius: 100rpx;
	  color: #fff;
	  font-size: 24rpx;
	}
}
.formCont{
	padding: 30rpx 4%;
	width: 100%;
	box-sizing: border-box;
	.formHead{
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
	}
	.formMoney{
		text-align: center;
		margin: 30rpx 0;
		color: #3f55cc;
		.moneyText{
			font-size: 40rpx;
			margin-right: 5rpx;
		}
	}
	.formItem{
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		background-color: #f8f8f8;
		padding: 25rpx 50rpx;
		box-sizing: border-box;
		border-radius: 50rpx;
		.inputName {
		  width: 140rpx;
		  position: relative;
		  font-size: 28rpx;
		  .mustIcon {
			font-size: 28rpx;
			top: 0;
			left: -16rpx;
			position: absolute;
			color: #ff5757;
		  }
		}
		.inputOut {
			flex: 1;
			width: 3rem;
			position: relative;
			.inputMask {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
			  }
			  input{
				width: 100%;
				border: none;
				background: none;
				outline: none;
				position: relative;
				z-index: 1;
			  }
		}
		.inputValue{
			flex: 1;
			width: 100rpx;
		}
		.icon-gouxuan1,.icon-xiala{
			color: #3f55cc;
		}
	}
	.sureBtn{
		width: 100%;
		padding: 25rpx 0;
		text-align: center;
		background-image: linear-gradient(to right bottom,#a3bffe,#3f55cc);
		color: #fff;
		font-size: 24rpx;
		border-radius: 100rpx;
		margin-top: 40rpx;
	}
}
</style>
